<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />

        <title>Arknights</title>
        <meta name="description" content="Arknights" />
        <meta name="author" content="Hairpin" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

        <link rel="stylesheet" href="css/normalize.css?v=1.0" />
        <link rel="stylesheet" href="css/loader.css" />
        <link rel="stylesheet" href="css/styles.css?v=1.0" />

        <!-- <script async src="https://s96.cnzz.com/z_stat.php?id=1277700683&web_id=1277700683"></script> -->
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-100439904-7"></script>
	<script>
		window.dataLayer = window.dataLayer || [];

		function gtag() {
			dataLayer.push(arguments);
		}
		gtag('js', new Date());

		gtag('config', 'UA-100439904-7');

	</script> -->
    </head>

    <body>
        <audio
            id="bgmAudio"
            preload="auto"
            loop="loop"
            src="http://hairpin.oss-cn-shanghai.aliyuncs.com/music/arknights/m_sys_void_loop.mp3"
        ></audio>
        <div class="loader-layer" id="loader-layer">
            <div class="tips">Tips: 如果加载速度过慢可以使用代理（本页托管于 GitHub Pages）。</div>
            <div class="loader" id="loader">
                <div class="bar">
                    <div class="circle"></div>
                    <p>Loading</p>
                </div>
            </div>
        </div>
        <header>
            <div class="author"></div>

            <div class="level-box-container">
                <div class="level-box" id="level-box-adapter">
                    <div class="level-logo"></div>
                    <div class="user-level">
                        <div class="level-chart">
                            <div class="chart-bg" id="chart-bg"></div>
                            <div class="chart-pr" id="chart-pr"></div>
                            <div class="level-num" id="level-num">73</div>
                        </div>
                    </div>
                    <div class="user-info">
                        <div class="name">冰花雪夜奏</div>
                        <div class="id">ID: 649390004</div>
                    </div>
                </div>
            </div>
        </header>

        <div id="view-box" class="view-box">
            <div id="mark" class="mark" data-pointer-events="true">
                <div id="bg-layer" class="layer" data-depth="0.0">
                    <img id="bg-img" class="cover" src="img/UI_HOME_FRONT_BKG.png" />
                </div>
                <div id="char-arts-layer" class="layer" data-depth="0.01">
                    <div class="char perspective box">
                        <img />
                    </div>
                </div>
                <div id="left-menu-layer" class="layer" data-depth="0.2">
                    <div class="left menu box">
                        <div class="container" id="left-mune-adapter">
                            <div class="top">
                                <div class="dialog">
                                    <span>博士？睡着了？哼，真没紧张感。</span>
                                </div>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <div class="activity-img"></div>
                                </div>
                                <div class="right">
                                    <div class="pos-1">
                                        <div class="friends">
                                            <div class="icon"></div>
                                            <div class="text">好友</div>
                                        </div>
                                    </div>
                                    <div class="pos-2">
                                        <div class="information">
                                            <div class="icon"></div>
                                            <div class="text">情报</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="right-menu-layer" class="layer" data-depth="0.2">
                    <div class="right menu box">
                        <div class="popup" id="right-mune-popup-adapter"></div>
                        <div class="container" id="right-mune-adapter">
                            <div class="pos-1">
                                <div class="top">
                                    <div class="line-left"></div>
                                    <div class="battery"></div>
                                    <div class="time" id="time">2019/12/05 21:17</div>
                                    <div class="line-right"></div>
                                </div>
                                <div class="bottom">
                                    <div class="bg"></div>
                                    <div class="status">
                                        <div class="item money">
                                            <div class="icon"></div>
                                            <div class="amount">114672</div>
                                        </div>
                                        <div class="item jasper">
                                            <div class="icon"></div>
                                            <div class="amount">2065</div>
                                            <div class="more"></div>
                                        </div>
                                        <div class="item stone">
                                            <div class="icon"></div>
                                            <div class="amount">4</div>
                                            <div class="more"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="pos-2">
                                <div class="intellect">
                                    <div class="icon"></div>
                                    <div class="content">
                                        <div class="figure">
                                            <div class="value">12</div>
                                            <div class="total">/127</div>
                                        </div>
                                        <div class="battle">
                                            <div class="text">作战</div>
                                            <div class="current">当前</div>
                                            <div class="level">全部完成</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="pos-3">
                                <div class="team">
                                    <div class="icon"></div>
                                    <div class="text">编队</div>
                                </div>
                                <div class="member">
                                    <div class="icon"></div>
                                    <div class="text">干员</div>
                                    <div class="desc">角色管理</div>
                                </div>
                                <div class="blank"></div>
                            </div>
                            <div class="pos-4">
                                <div class="shop">
                                    <div class="icon"></div>
                                    <div class="text">采购中心</div>
                                </div>
                                <div class="gamble">
                                    <div class="top">
                                        <div class="icon"></div>
                                        <div class="text">招募</div>
                                    </div>
                                    <div class="bottom">
                                        <div class="left">
                                            <div class="icon"></div>
                                            <div class="text">公开招募</div>
                                        </div>
                                        <div class="right">
                                            <div class="icon"></div>
                                            <div class="text">干员寻访</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="pos-5">
                                <div class="task">
                                    <div class="icon"></div>
                                    <div class="text">任务</div>
                                </div>
                                <div class="infrastructure">
                                    <div class="icon"></div>
                                    <div class="text">基建</div>
                                    <div class="beta"></div>
                                </div>
                                <div class="warehouse">
                                    <div class="icon"></div>
                                    <div class="text">仓库</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            /* loader */
            ;(function() {
                document
                    .querySelector('#loader')
                    .setAttribute(
                        'style',
                        'transform: scale(' +
                            Math.max(window.innerHeight, window.innerWidth) / 1366 +
                            ') translateY(-50%); top: 60%; transform-origin: top center;'
                    )
            })()
        </script>

        <script src="js/lib/jquery.3.3.1.min.js?v=1.0"></script>
        <script src="js/lib/jquery.pjax.js?v=1.0"></script>
        <script src="js/lib/GYST.js?v=1.0"></script>
        <script src="js/lib/parallax.3.1.0.min.js?v=1.0"></script>
        <script src="js/scripts.js?v=1.1"></script>
    </body>
</html>
